<template>
    <div class="main">
        <Nav />
        <div class="right_route">
            <div class="bottom_content">
                <div class="search_input">
                    <div class="item_first">
                        <el-row :gutter="20">
                            <el-col :span="4">
                                <div class="item">
                                    <span>微信昵称：</span>
                                    <div>
                                        <el-input v-model="infor.nickname" placeholder="请输入微信昵称" size="large" />
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="4">
                                <div class="item">
                                    <span>用户ID：</span>
                                    <div>
                                        <el-input v-model="infor.id	" placeholder="请输入用户ID" size="large" />
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="4">
                                <div class="item">
                                    <span>微信号：</span>
                                    <div>
                                        <el-input v-model="infor.number" placeholder="请输入微信号" size="large"
                                            />
                                    </div>
                                </div>
                            </el-col>
							<el-col :span="4">
							    <div class="item">
							        <span>用户状态：</span>
							        <div>
							            <el-select v-model="infor.status" placeholder="请选择用户状态" 
							                size="large">
							                <el-option label="禁用" value="2" />
							                <el-option label="启用" value="1" />
							            </el-select>
							        </div>
							    </div>
							</el-col>
							
							<el-col :span="4">
							    <div class="item">
							        <span>信息完善：</span>
							        <div>
							            <el-select v-model="infor.style" placeholder="请选择信息是否完善" 
							                size="large">
							                <el-option label="已完善" value="1" />
							                <el-option label="未完善" value="2" />
							            </el-select>
							        </div>
							    </div>
							</el-col>
							
							<el-col :span="4">
							  <div class="submit_button">
							    <el-button type="primary" size="large" @click="inquire">查询</el-button>
							    <el-button type="warning" size="large" @click="reset">重置</el-button>
							  </div>
							</el-col>
                        </el-row>
                    </div>
                   
                </div>
                <div class="table">
                    <Table height="auto" :list="table_list"/>
                </div>
                <div class="pagination">
                    <Pagination :list="page_list"/>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive } from 'vue'
import { defineComponent } from 'vue'
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import Nav from "@/components/public/nav.vue"
import Pagination from "@/components/home/task/pagination.vue"
import Table from "@/components/user/listTable.vue"
import { get_user_list } from "@/request/api/user.ts"
const infor = reactive({
    number : '',
    id : '',
    nickname : '',
    status : '',
    style : ''
})
let table_list = ref("")
let page_list = ref("")
let params_init:any = {
    number : undefined,
    id : undefined,
    nickname : undefined,
    status : undefined,
    style : undefined
}
// 查询
function inquire() {
    params_init.number = infor.number
    params_init.id = infor.id
    params_init.nickname = infor.nickname
    params_init.status = infor.status
    params_init.style = infor.style
    getUser()
}
// 重置
function reset() {
    infor.number = ''
    infor.id = ''
    infor.nickname = ''
    infor.status = ''
    infor.style = ''
    inquire()
}
 
const getUser = async () => {
    let { data } = await get_user_list(params_init)
    console.log(data, "data");
    table_list.value = data.list
    page_list.value = data.pageData
}
onMounted(async() => {
    getUser()
    
})
</script>

<style lang="scss" scoped>
.main {
    display: flex;
    .right_route {
        padding: 0 20px 0 20px;
        flex: 1;
        box-sizing: border-box;
        background: rgba(#FFF, 1);
        width: calc(100vw - 200px);
        .bottom_content {
            margin-top: 0;
        }

        .date {
            display: flex;
            margin: 20px 0;

            span {
                display: inline-block;
                flex: 1;
                text-align: center;
                @include font(#333, 17, 60);
                cursor: pointer;
            }

            .active {
                background: rgba(64, 158, 255, 1);
                color: #FFF;
            }
        }

        .scrollbar {
            width: calc(100vw - 250px);
        }

        .search_input {
            // display: flex;
            // flex-wrap: wrap;

            // padding-right: 192px;
            .item_first {

                .item {
                    display: flex;
                    align-items: center;
                    margin-top: 20px;

                    span {
                        display: inline-block;
                        width: 70px;
                        @include font(rgba(0, 0, 0, 0.8470588235294118), 14, 22);
                    }
                    >div{
                        flex: 1;
                    }
                }
            }

            .submit_button {
                display: flex;
                align-items: center;
                margin-top: 20px;
            }
        }

        .table {
            margin-top: 20px;
        }

        .pagination {
            margin: 20px 0;
            display: flex;
            justify-content: right;
        }
    }
}

.scrollbar-flex-content {
    display: flex;
}

.scrollbar-demo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 126px;
    height: 50px;
    text-align: center;
    border-radius: 4px;
    // background: var(--el-color-danger-light-9);
    @include font(#333, 13, 50);
    cursor: pointer;

    .num {
        margin-left: 5px;
    }

    &.active_nav {
        color: rgb(64, 158, 255);
    }
}
:deep(.el-select) {
    width: 100%;
}
:deep(.el-input--large){
  height: 32px;
}
:deep(.el-button){
  height: 32px;
}
</style>